<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../back-common.jsp"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
  <link href="<ls:templateResource item='/resources/plugins/taskdashboard/css/bootstrap.min.css?v=3.3.6'/>" rel="stylesheet">
  <link href="<ls:templateResource item='/resources/plugins/taskdashboard/css/style.css?v=4.1.0'/>" rel="stylesheet">
  <script src="<ls:templateResource item='/resources/plugins/taskdashboard/js/jquery-ui-1.10.4.min.js'/>" type="text/javascript"></script>
     <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>目标列表</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动目标面板</p>

                        <div class="input-group">
                            <input type="text" placeholder="添加新目标" class="input input-sm form-control">
                            <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
                                </span>
                        </div>

                        <ul class="sortable-list connectList agile-list">
                            <li class="warning-element">
                                加强过程管理，及时统计教育经费使用情况，做到底码清楚，
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                    <i class="fa fa-clock-o"></i> 2015.09.01
                                </div>
                            </li>
                            <li class="success-element">
                                支持财会人员的继续培训工作。
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2015.05.12
                                </div>
                            </li>
                            <li class="info-element">
                                协同教导处搞好助学金、减免教科书费的工作。
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2015.09.10
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>进行中</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动目标面板</p>
                        <ul class="sortable-list connectList agile-list">
                            <li class="success-element">
                                全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                    <i class="fa fa-clock-o"></i> 2015.09.01
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>已完成</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动目标面板</p>
                        <ul class="sortable-list connectList agile-list">
                            <li class="info-element">
                                制定工作日程表
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2015.09.10
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
  <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>已取消</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动目标面板</p>
                        <ul class="sortable-list connectList agile-list">
                            <li class="info-element">
                                制定工作日程表
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2015.09.10
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>已关闭</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动目标面板</p>
                        <ul class="sortable-list connectList agile-list">
                            <li class="info-element">
                                制定工作日程表
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2015.09.10
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
           </div>
        </div>
    </div>

<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
    $(".sortable-list").sortable({
        connectWith: ".connectList",
        // 拖拽结束函数
        stop: (e, ui) => {
          // 当前拽入的元素
          let item = $(ui.item)
          // 当前拽入元素的下标
          let index = item.index()
          let kid = ''
        	  console.log("stop");
        	  console.log(item);
          // xxxx 这里面可以操作数据更新
        },
        // 开始拖拽时的函数
        start: (e, ui) => {
          // 拖拽前的父级节点
          dragBeforeParentNode = ui.item[0].parentNode
          // 让placeholder和源高度一致
           ui.placeholder.height(ui.helper[0].scrollHeight).width(258)
           console.log("start");
          let item = $(ui.item)
          	  console.log(item);
          //  console.log(dragBeforeParentNode);
           // xxxx  这里可以记录一些拖拽前的元素属性
        },
        receive: function( event, ui ) {
        	//console.log(event);
        	//console.log(ui);
        }
    }).disableSelection();

});
</script>